<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平垂直居中</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .wrap {
    width: 300px;
    height: 300px;
    border: 1px solid red;
  }

  .box {
    background: blue;
  }

  /* .size {
    width: 100px;
    height: 100px;
  } */

  /* 以上公共代码 */
  /* 1 通过定位absolute + 负margin*/
  .wrap {
    position: relative;
  }

  /* .box {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
  } */
  /* 2 absolute + margin :auto */
  /* .box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  } */
  /* 3 absolute + calc */
  /* .box {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
  } */
  /* 4,css3 新增transform translate  不需要给居中的元素定义宽高*/
  /* .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  } */
</style>
<!-- 
  1,box是有宽和高的
  2，box没有宽高的
-->

<body>
  <div class='wrap'>
    <div class='box size'>
      内容内容内容内容内容内容内容内容内容内容内容内容内容
    </div>
  </div>
</body>

</html>